<template>
    <el-dialog :title="title" width="420px" :visible.sync="visible" append-to-body :close-on-click-modal="false">
        <div v-if="isOver" class="import-result wrap">
            <i class="el-icon-success" />
            <p class="title">数据导入已完成</p>
            <p class="des">已成功导入{{ importResult.successCount }}条数据，失败<span class="color-red"> {{ importResult.failCount }} </span>条。</p>
        </div>        
        
        <div v-else v-loading="submitLoading" element-loading-text="导入中" class="wrap">
            <div style="margin-bottom: 12px;">上传Excel文件：<span style="font-size: 12px;">仅支持.xls、.xlsx文件，文件大小10M内。</span></div>
            <el-upload
                ref="upload"
                class="upload"
                :limit="1"
                drag
                action=""
                accept=".xls, .xlsx"
                :auto-upload="false"
                :on-exceed="handleExceed"
                :on-change="handleChange"
                :on-remove="handleRemove"
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em> 点击上传</em></div>
            </el-upload>
            <div class="tip">
                <div class="title"> <i class="el-icon-warning" style="font-size: 16px;"></i> 注意： </div>
                <ul class="des">
                    <li>1、若第一次导入文件请点击下载 <span class="color-blue" style="cursor: pointer;" @click="handleDownloadTemplate">《{{ templateName }}》</span></li>
                    <li>2、请确认上传填写正确的清单子目导入模板</li>
                    <!-- <li>3、导入文件后，请查看导入结果，如出现错误，请修改后重新导入</li> -->
                    <li>3、导入时如果存在重复内容会替换已有内容</li>
                </ul>
            </div>
        </div>
        
        <div slot="footer" class="dialog-footer">
            <BaseButton v-if="!isOver" type="recond" @click="cancel">取消</BaseButton>
            <BaseButton v-if="!isOver" :loading="submitLoading" @click="submitForm">导入</BaseButton>

            <BaseButton v-if="isOver" :type="importResult.failCount > 0 ? 'recond' : 'primary'" @click="cancel">确定</BaseButton>
            <BaseButton v-if="importResult.failCount > 0" :loading="submitLoading" @click="handleExportLog">导出失败数据</BaseButton>
        </div>
    </el-dialog>
</template>

<script>
import { ProjectLedgerModel } from '@/models'

import { ProjectLedgerApi } from '@/api'
import downLoad, { downLoadGet } from '@/utils/blob-download'

export default {
    name: 'ChapterSetting',
    props: {
        type: {
            type: Number,
            default: 1 // type=1:普通工程量清单；type=2:计日工
        },
    },
    data() {
        return {
            model: new ProjectLedgerModel(),
            templateName: '',
            visible: false,
            submitLoading: false,
            projectId: '',
            isOver: false,
            file: '',
            importResult: {},
            title: '导入工程量清单'
        }
    },
    methods: {
        handleExportLog() {
            const path = ProjectLedgerApi.importResultPath
            downLoadGet(path, {fileName: this.importResult.fileName}, '', 'Excel')
        },
        // 取消按钮
        cancel() {
            this.visible = false
        },
        open(optiosn) {
            const { projectId } = optiosn
            this.projectId = projectId
            this.visible = true
            if (this.type === 1) {
                this.templateName = '工程清单子目导入模板'
                this.title = '导入工程量清单'
            }
            if (this.type === 2) {
                this.templateName = '计日工清单子目导入模板'
                this.title = '导入计日工清单'
            }
            // 恢复初始数据
            this.submitLoading = false
            this.isOver = false
            this.file = ''
            this.importResult = {}
            this.$nextTick(() => {
                this.$refs.upload.clearFiles()
            })
        },
        submitForm() {
            if (!this.file) {
                this.$message.error('请上传需要导入的文件')
                return
            }
            this.submitLoading = true
            this.isOver = false
            const data = {
                projectId: this.projectId,
                msType: 2,
                file: this.file,
                type: this.type
            }
            this.model.import(data).then((res) => {
                this.isOver = true
                this.importResult = res || {}
                this.$emit('success')
            }).finally(() => {
                this.submitLoading = false
            })
        },
        handleChange(file) {
            if (!file.raw.type.includes('.sheet')) {
                this.$message.error('只支持上传.xls、.xlsx类型文件')
                this.$refs.upload.clearFiles()
                return
            }
            // 文件大于10MB的禁止上传
            if (file.raw.size / 1024 / 1024 > 10) {
                this.$message.error(`文件大小超过10MB`)
                this.$refs.upload.clearFiles()
                return
            }
            this.file = file.raw
        },
        handleExceed() {
            this.$message.warning('只能上传1个文件，请删除后再重新上传！')
        },
        handleRemove() {
            this.file = ''
        },
        handleDownloadTemplate() {
            const path = ProjectLedgerApi.templatePath
            const form = new FormData()
            form.append('type', this.type)
            downLoad(path, form, this.templateName, 'Excel', null, 'multipart/form-data')
        },
    }
}
</script>

<style lang="scss" scoped>
.wrap {
    height: 384px;
}
.tip {
    // background-color: rgba(0, 98, 255, 0.06);
    padding: 16px 8px 0 8px;
    font-size: 12px;
    line-height: 1.8;
    .title {
        font-size: 14px;
        font-weight: bold;
    }
}
.import-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    font-size: 58px;
    color: #67C23A;

    .title {
        margin: 16px 0 8px;
        font-size: 18px;
        color: #333;
    }

    .des {
        margin: 0;
        font-size: 16px;
        color: #666;
    }
}

</style>
